<template>
  <section class='f-withdraw-detail'>
    <section class="f-card">
      <img v-if="formData.payType == 2" class="f-img" src="@/assets/icons/icon_wx_big.png" alt="">
      <img v-if="formData.payType == 3" class="f-img" src="@/assets/icons/icon_zfb_big.png" alt="">
      <img v-if="formData.payType == 11" class="f-img" src="@/assets/icons/withdraw_icon_yhk.png" alt="">
      <div class="f-center" style="padding-top:37px;color: #000000;">
        <p style="font-weight: 400;font-size: 12px;">{{formData.payType == 2? '微信': formData.payType == 3? '支付宝': '银行卡'}}</p>
        <p style="font-weight: 500;font-size: 20px;padding:7px 0 4px 0">{{toThousands(formData.totalMoney)}}</p>
        <p style="font-weight: 400;font-size: 10px;" :style="{'color': orderStatusColor[formData.orderStatus]}">
          {{orderStatus[formData.orderStatus]}}</p>
      </div>

      <ul class="f-detail">
        <li>
          <p>提取金额</p>
          <p>{{toThousands(formData.totalMoney)}}元</p>
        </li>
        <li>
          <p>服务费</p>
          <p>{{toThousands(formData.serviceMoney)}}元</p>
        </li>
        <li>
          <p>实际到账</p>
          <p>{{toThousands(formData.actualMoney)}}元</p>
        </li>
        <li>
          <p>收款方式</p>
          <p>{{formData.payType == 2? '微信': formData.payType == 3? '支付宝': '银行卡'}}</p>
        </li>
        <li>
          <p>收款账号</p>
          <p>{{formData.toAccount}}</p>
        </li>
        <li>
          <p>订单号</p>
          <p>{{formData.sysOrderId}}</p>
        </li>
        <li>
          <p>操作人</p>
          <p>{{formData.userName}}</p>
        </li>
        <li>
          <p>提现时间</p>
          <p>{{ getDateTime(formData.createTime)[6] }}</p>
        </li>
        <li>
          <p>结果说明</p>
          <p>{{ formData.resultMsg }}</p>
        </li>
      </ul>
    </section>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'
import { getDateTime, toThousands } from '@/utils/utils';

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      formData: {},

      orderStatus: {
        '1': '提现中',
        '2': '已关闭',
        '3': '提现失败',
        '4': '提现成功',
        '5': '待人工处理',
      },
      orderStatusColor: {
        '1': '#488BFE',
        '2': '#FF2B2B',
        '3': '#FF2B2B',
        '4': '#1FBE2A',
      },
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '记录详情',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      getIncomeWithdrawDetail()
    })

    const getIncomeWithdrawDetail = () => {
      let json = {
        sysOrderId: route.query.sysOrderId
      }
      api.incomeWithdrawDetail(json).then(res => {
        state.formData = res.data
      })
    }

    return {
      ...toRefs(state),
      toThousands,
      getDateTime
    }
  }
}
</script>

<style lang='scss' scoped>
.f-withdraw-detail {
  .f-card {
    width: 347px;
    background: #ffffff;
    border-radius: 5px;
    padding-bottom: 13px;
    margin: 39px 14px;
    position: relative;
    .f-img {
      width: 45px;
      height: 45px;
      position: absolute;
      left: 50%;
      top: -15px;
      transform: translateX(-50%);
    }
    .f-detail {
      margin-top: 30px;
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 13px 0 16px;
        margin: 15px 0;
        font-weight: 400;
        font-size: 11px;
        color: #666666;
        p:last-child {
          color: #000000;
        }
      }
    }
  }
}
</style>